<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">
          <el-form-item label="租户名：">
            <el-input v-model="listQuery.name"
                      placeholder="请输入"
                      clearable />
          </el-form-item>
        </div>
        <div class="right-box">
          <el-button size="mini"
                     @click="handleFilter">查询</el-button>
        </div>
      </template>
    </search-box>
    <div class="table-wrap">
      <el-table :data="list"
                style="width:100%"
                element-loading-text="Loading"
                height="600">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        ></el-table-column>
        <el-table-column prop="name"
                         label="租户名">
        </el-table-column>
        <el-table-column prop="description"
                         label="描述">
        </el-table-column>
        <el-table-column prop="address"
                         label="地址">
        </el-table-column>
        <el-table-column prop="managerPerson"
                         label="负责人">
        </el-table-column>
        <el-table-column prop="managerMobile"
                         label="负责人电话">
        </el-table-column>
        <el-table-column label="操作"
                         width="110">
          <template slot-scope="scope">
            <div class="scope-operate">
              <span class="editor-box">
                <i class="el-icon-edit-outline"
                   style="color:#0095e3"
                   @click="handleUpdate(scope.row)"></i>
              </span>
            </div>

          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.pageNumber"
                  :limit.sync="listQuery.pageSize"
                  @pagination="getList" />
    </div>
    <CreateTenant ref="createTenantForm"
                  :text-map="textMap"
                  :dialog-status="dialogStatus"
                  :dialog-form-visible.sync="dialogFormVisible"
                  @on-fresh-list="getList" />

  </div>
</template>

<script>
import * as apiTenant from '@/api/tenant'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// 当然你也可以为了方便使用，将它注册到全局
import CreateTenant from '@/views/system-setting/tenant/createTenant'
import { MessageBox } from 'element-ui'
import searchBox from '@/components/searchBox.vue'

export default {
  name: 'Tenant',
  components: { Pagination, CreateTenant, searchBox },
  directives: { waves },
  filters: {

  },
  data () {
    return {
      list: null,
      total: 0,
      listQuery: { // 查询列表时的参数对象
        pageNumber: 1,
        pageSize: 50,
        name: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      }
    }
  },
  created () {
    this.getList()
  },
  mounted () {
    // 测试用
    // var that = this
    // setTimeout(function() {
    //   that.dialogFormVisible = true
    // }, 5000)
  },
  beforeDestroy () { // 当路由切换到其他页面时触发
    // alert('离开用户管理界面')
  },
  methods: {
    async getList () { // 获取列表数据
      const { content } = await apiTenant.getList(this.listQuery)
      this.list = content.list
      this.total = content.totalCounts
    },
    handleFilter () {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    handleUpdate (row) {
      console.log('row--->', row)
      const currentRow = Object.assign({}, row)
      this.$refs['createTenantForm'].setCurrentRow(currentRow)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['createTenantForm'].$refs['dataForm'].clearValidate()
      })
    }
  }
}
</script>

<style scoped>
.app-select {
  margin-bottom: 20px;
}
</style>
